<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootshop online Shopping cart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Less styles -->
    <!-- Other Less css file //different less files has different color scheam
     <link rel="stylesheet/less" type="text/css" href="${path}/themes/less/simplex.less">
     <link rel="stylesheet/less" type="text/css" href="${path}/themes/less/classified.less">
     <link rel="stylesheet/less" type="text/css" href="${path}/themes/less/amelia.less">  MOVE DOWN TO activate
     -->
    <!--<link rel="stylesheet/less" type="text/css" href="${path}/themes/less/bootshop.less">
    <script src="${path}/themes/js/less.js" type="text/javascript"></script> -->

    <!-- Bootstrap style -->
    <link id="callCss" rel="stylesheet" href="${path}/themes/bootshop/bootstrap.min.css" media="screen"/>
    <link href="${path}/themes/css/base.css" rel="stylesheet" media="screen"/>
    <!-- Bootstrap style responsive -->
    <link href="${path}/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link href="${path}/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
    <!-- Google-code-prettify -->
    <link href="${path}/themes/js/google-code-prettify/prettify.css" rel="stylesheet"/>
    <!-- fav and touch icons -->
    <link rel="shortcut icon" href="${path}/themes/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
          href="${path}/themes/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
          href="${path}/themes/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${path}/themes/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="${path}/themes/images/ico/apple-touch-icon-57-precomposed.png">
    <style type="text/css" id="enject"></style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
           $("#addcart").click(function () {
               var id = $("#addcart").val();
               $.post("${path}/product/addcart",{"product.id":id}, function (a) {
                   $("#addcartspan").html("添加成功!");
               })
           }); 
        });
    </script>
</head>
<body>
<jsp:include page="header.jsp"/>
<!-- Header End====================================================================== -->
<div id="carouselBlk">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <a href=""><img style="width:100%" src="${path}/themes/images/carousel/1.png"
                                                 alt="special offers"/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <a href=""><img style="width:100%" src="${path}/themes/images/carousel/2.png" alt=""/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <a href=""><img src="${path}/themes/images/carousel/3.png" alt=""/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class="container">
                    <a href=""><img src="${path}/themes/images/carousel/4.png" alt=""/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class="container">
                    <a href=""><img src="${path}/themes/images/carousel/5.png" alt=""/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <a href=""><img src="${path}/themes/images/carousel/6.png" alt=""/></a>
                    <div class="carousel-caption">
                        <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                            gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>
<div id="mainBody">
    <div class="container">
        <div class="row">
            <!-- Sidebar ================================================== -->
  			<jsp:include page="sider.jsp"/>
            <!-- Sidebar end=============================================== -->
            <div class="span9">
                <div class="well well-small">
                    <h4>Featured Products
                        <small class="pull-right">${count } featured products</small>
                    </h4>
                    <div class="row-fluid">
                        <div id="featured" class="carousel slide">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <ul class="thumbnails">
                                  <c:forEach items="${products }" var="p" begin="0" end="3">
                                        <li class="span3">
                                            <div class="thumbnail">
                                                <i class="tag"></i>
                                        <c:forEach items="${p.pictures }" var="ps">
			  									<c:if test="${ps.cover!=0 }">
												<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
												</c:if>
										</c:forEach>
                                                <div class="caption">
                                                    <h5>${p.name }</h5>
                                                    <h4><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }">VIEW</a>
                                                    <span class="pull-right">$${p.price }0</span></h4>
                                                </div>
                                            </div>
                                        </li>
                                  </c:forEach>
                                    </ul>
                                </div>
                                <div class="item">
                                    	<ul class="thumbnails">
                                    		<c:forEach items="${products }" var="p" begin="4" end="7">
                                    			<li class="span3">
                                            <div class="thumbnail">
                                                <i class="tag"></i>
                                       			 <c:forEach items="${p.pictures }" var="ps">
			  									<c:if test="${ps.cover!=0 }">
												<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
												</c:if>
												</c:forEach>
                                                <div class="caption">
                                                    <h5>${p.name }</h5>
                                                    <h4><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }">VIEW</a>
                                                    <span class="pull-right">$${p.price }0</span></h4>
                                                </div>
                                            </div>
                                        </li>
                                    	</c:forEach>
                                    	</ul>
                                    </div>
                                    <div class="item">
                                    	<ul class="thumbnails">
                                    		<c:forEach items="${products }" var="p" begin="8" end="11">
                                    			<li class="span3">
                                            <div class="thumbnail">
                                                <i class="tag"></i>
                                       			 <c:forEach items="${p.pictures }" var="ps">
			  									<c:if test="${ps.cover!=0 }">
												<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
												</c:if>
												</c:forEach>
                                                <div class="caption">
                                                    <h5>${p.name }</h5>
                                                    <h4><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }">VIEW</a>
                                                    <span class="pull-right">$${p.price }0</span></h4>
                                                </div>
                                            </div>
                                        </li>
                                    	</c:forEach>
                                    	</ul>
                                    </div>
                                    <div class="item">
                                    	<ul class="thumbnails">
                                    		<c:forEach items="${products }" var="p" begin="12" end="15">
                                    			<li class="span3">
                                            <div class="thumbnail">
                                                <i class="tag"></i>
                                       			 <c:forEach items="${p.pictures }" var="ps">
			  									<c:if test="${ps.cover!=0 }">
												<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
												</c:if>
												</c:forEach>
                                                <div class="caption">
                                                    <h5>${p.name }</h5>
                                                    <h4><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }">VIEW</a>
                                                    <span class="pull-right">$${p.price }0</span></h4>
                                                </div>
                                            </div>
                                        </li>
                                    	</c:forEach>
                                    	</ul>
                                    </div>
                                    <div class="item">
                                    	<ul class="thumbnails">
                                    		<c:forEach items="${products }" var="p" begin="16" end="19">
                                    			<li class="span3">
                                            <div class="thumbnail">
                                                <i class="tag"></i>
                                       			 <c:forEach items="${p.pictures }" var="ps">
			  									<c:if test="${ps.cover!=0 }">
												<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
												</c:if>
												</c:forEach>
                                                <div class="caption">
                                                    <h5>${p.name }</h5>
                                                    <h4><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }">VIEW</a>
                                                    <span class="pull-right">$${p.price }0</span></h4>
                                                </div>
                                            </div>
                                        </li>
                                    	</c:forEach>
                                    	</ul>
                                    </div>
                            </div>
                            <a class="left carousel-control" href="#featured" data-slide="prev">‹</a>
                            <a class="right carousel-control" href="#featured" data-slide="next">›</a>
                        </div>
                    </div>
                </div>
                <h4>Latest Products </h4>
                <ul class="thumbnails">
                    <s:iterator value="products" begin="0" end="5">
                    <li class="span3">
                        <div class="thumbnail">
                            <s:iterator value="pictures">
                            <s:if test="cover!=0">
							<a href="${pageContext.request.contextPath }/product/details?id=<s:property value="id"/>"><img src="<s:property value="path"/>" alt=""/></a>
							</s:if>
							</s:iterator>
                            <div class="caption">
                                <h5><s:property value="name"/></h5>
                                <p>
                                   		 没有乱码....
                                </p><br>
                                <span id="addcartspan" style="color: green"></span>
                                <h4 style="text-align:center">
                                <a class="btn" href="${path }/product/details?id=<s:property value="id"/>"><i class="icon-zoom-in"></i></a>
                                <a class="btn" id="addcart" href="${path }/product/addcart?product.id=<s:property value="id"/>">Add to <i class="icon-shopping-cart"></i></a>
                                <a class="btn btn-primary" href="${path }/product/details?id=<s:property value="id"/>">$<s:property value="price"/>0</a>
                                </h4>
                            </div>
                        </div>
                    </li>
                    </s:iterator>
                </ul>

            </div>
        </div>
    </div>
</div>
<!-- Footer ================================================================== -->
<jsp:include page="footer.jsp"/>
<!-- Placed at the end of the document so the pages load faster ============================================= -->
<script src="${path}/themes/js/jquery.js" type="text/javascript"></script>
<script src="${path}/themes/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${path}/themes/js/google-code-prettify/prettify.js"></script>
<script src="${path}/themes/js/bootshop.js"></script>
<script src="${path}/themes/js/jquery.lightbox-0.5.js"></script>
<jsp:include page="theme.jsp"/>
</body>
</html>